<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售数据分析仪表盘</title>
    <link rel="stylesheet" href="../plugins/select/style.css">
    <link rel="stylesheet" href="../plugins/input-number/style.css">
    <link rel="stylesheet" href="../plugins/checkbox/style.css">
    <link rel="stylesheet" href="../plugins/modal/style.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 30px;
            background-color: #f5f7fa;
        }

        h1,
        h2,
        h3 {
            color: #2c3e50;
        }

        .dashboard {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-top: 30px;
        }

        .dashboard .card {
            margin: 0;
        }

        .card {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin: 15px 0;
            transition: transform 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .full-width {
            grid-column: 1 / -1;
        }

        .data-input {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 24px;
            padding: 20px;
        }

        .input-group {
            margin-bottom: 0;
            padding: 0;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
            font-size: 14px;
        }

        input,
        select {
            width: 100%;
            height: 32px;
            padding: 4px 11px;
            border: 1px solid #d9d9d9;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s ease;
        }

        input:focus,
        select:focus {
            border-color: #1890ff;
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
            outline: none;
        }

        input:hover,
        select:hover {
            border-color: #40a9ff;
        }

        button {
            background-color: #3498db;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #2980b9;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }

        .stat-card {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin: 10px 0;
        }

        .chart-container {
            height: 300px;
            margin-top: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }

        th,
        td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        tr:hover {
            background-color: #f5f5f5;
        }

        .product-performance {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

        .product-bar {
            position: relative;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 4px;
            overflow: hidden;
        }

        .product-bar {
            --width: 0%;
        }

        .product-bar::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: var(--width);
            height: 100%;
            background-color: #3498db;
            border-radius: 4px;
            transition: width 0.5s ease-in-out;
        }

        #region-distribution>div,
        #product-performance>div {
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        #product-performance>div>span:first-child {
            width: 60px;
        }

        #product-performance>div>span:last-child {
            width: 100px;
            text-align: right;
        }

        #region-distribution .product-bar,
        #product-performance .product-bar {
            margin: 0 10px;
            flex-grow: 1;
        }

        .button-group {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 20px 0;
        }
    </style>
</head>

<body>
    <h1>销售数据分析仪表盘</h1>
    <p>基于响应式Signal系统的实时数据可视化应用</p>
    <div class="dashboard">
        <div class="card full-width">
            <h2>销售数据输入</h2>
            <div class="data-input">
                <div class="input-group">
                    <label for="product">产品</label>
                    <div id="product-container"></div>
                </div>
                <div class="input-group">
                    <label for="quantity">销售数量</label>
                    <div id="quantity-container"></div>
                </div>
                <div class="input-group">
                    <label for="price">单价 (元)</label>
                    <div id="price-container"></div>
                </div>
                <div class="input-group">
                    <label for="region">销售区域</label>
                    <div id="region-container"></div>
                </div>
                <div class="input-group">
                    <label for="note">备注</label>
                    <input type="text" id="note" placeholder="请输入备注信息">
                </div>
            </div>
        </div>

    </div>
    <div class="button-group">
        <button id="add-sale">添加销售记录</button>
        <button id="add-demo-data">添加演示数据</button>
    </div>
    <div class="card">
        <h2>销售统计</h2>
        <div class="stats">
            <div class="stat-card">
                <div>总销售额</div>
                <div id="total-sales" class="stat-value">0</div>
                <div>元</div>
            </div>
            <div class="stat-card">
                <div>总销售量</div>
                <div id="total-quantity" class="stat-value">0</div>
                <div>件</div>
            </div>
            <div class="stat-card">
                <div>平均单价</div>
                <div id="avg-price" class="stat-value">0</div>
                <div>元</div>
            </div>
            <div class="stat-card">
                <div>销售记录数</div>
                <div id="sale-count" class="stat-value">0</div>
                <div>条</div>
            </div>
        </div>
    </div>

    <div class="card">
        <h2>区域销售分布</h2>
        <div id="region-distribution">
            <div>华东: <div class="product-bar" id="region-华东"></div> <span id="region-华东-value">0%</span></div>
            <div>华南: <div class="product-bar" id="region-华南"></div> <span id="region-华南-value">0%</span></div>
            <div>华北: <div class="product-bar" id="region-华北"></div> <span id="region-华北-value">0%</span></div>
            <div>西部: <div class="product-bar" id="region-西部"></div> <span id="region-西部-value">0%</span></div>
        </div>
    </div>

    <div class="card full-width">
        <h2>产品销售表现</h2>
        <div id="product-performance">
            <div>产品A: <div class="product-bar" id="product-产品A"></div> <span id="product-产品A-value">0元</span></div>
            <div>产品B: <div class="product-bar" id="product-产品B"></div> <span id="product-产品B-value">0元</span></div>
            <div>产品C: <div class="product-bar" id="product-产品C"></div> <span id="product-产品C-value">0元</span></div>
            <div>产品D: <div class="product-bar" id="product-产品D"></div> <span id="product-产品D-value">0元</span></div>
        </div>
    </div>

    <div class="card full-width">
        <h2>销售记录</h2>
        <div class="button-group" style="justify-content: flex-start;">
            <button id="batch-delete" style="background-color: #e74c3c;">批量删除</button>
        </div>
        <table id="sales-table">
            <thead>
                <tr>
                    <th id="select-all-container"></th>
                    <th>产品</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>总价</th>
                    <th>区域</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="sales-data">
                <!-- 销售数据将在这里动态生成 -->
            </tbody>
        </table>
    </div>
    </div>

    <!-- 应用逻辑 -->
    <script src="../plugins/select/index.js"></script>
    <script src="../plugins/input-number/index.js"></script>
    <script src="../plugins/checkbox/index.js"></script>
    <script src="../plugins/modal/index.js"></script>
    <script src="./signal.js"></script>
    <script>
        // 初始化自定义表单组件
        const productSelect = new Select({
            placeholder: '请选择产品'
        });
        productSelect.setOptions([
            { value: '产品A', label: '产品A' },
            { value: '产品B', label: '产品B' },
            { value: '产品C', label: '产品C' },
            { value: '产品D', label: '产品D' }
        ]);
        productSelect.mount('#product-container');

        const quantityInput = new InputNumber({
            min: 1,
            value: 1,
            step: 1
        });
        quantityInput.mount('#quantity-container');

        const priceInput = new InputNumber({
            min: 0,
            value: 100,
            step: 0.01
        });
        priceInput.mount('#price-container');

        const regionSelect = new Select({
            placeholder: '请选择销售区域'
        });
        regionSelect.setOptions([
            { value: '华东', label: '华东' },
            { value: '华南', label: '华南' },
            { value: '华北', label: '华北' },
            { value: '西部', label: '西部' }
        ]);
        regionSelect.mount('#region-container');

        // 创建销售数据信号
        const salesData = new Signal([]);

        // 计算属性：总销售额
        const totalSales = computed(() => salesData.value.reduce((sum, sale) => sum + (sale.quantity * sale.price), 0));

        // 计算属性：总销售量
        const totalQuantity = computed(() => salesData.value.reduce((sum, sale) => sum + sale.quantity, 0));

        // 计算属性：平均单价
        const avgPrice = computed(() => {
            const total = totalSales.value;
            const quantity = totalQuantity.value;
            return quantity > 0 ? (total / quantity).toFixed(2) : 0;
        });

        // 计算属性：销售记录数
        const saleCount = computed(() => salesData.value.length);

        // 计算属性：区域销售分布
        const regionDistribution = computed(() => {
            const regions = {};
            const total = totalSales.value;

            // 初始化所有区域
            ['华东', '华南', '华北', '西部'].forEach(region => {
                regions[region] = 0;
            });

            // 计算每个区域的销售额
            salesData.value.forEach(sale => {
                regions[sale.region] += sale.quantity * sale.price;
            });

            // 计算百分比
            if (total > 0) {
                Object.keys(regions).forEach(region => {
                    regions[region] = {
                        value: regions[region],
                        percentage: ((regions[region] / total) * 100).toFixed(1)
                    };
                });
            } else {
                Object.keys(regions).forEach(region => {
                    regions[region] = {
                        value: 0,
                        percentage: '0.0'
                    };
                });
            }
            return regions;
        });

        // 计算属性：产品销售表现
        const productPerformance = computed(() => {
            const products = {};
            const total = totalSales.value;

            // 初始化所有产品
            ['产品A', '产品B', '产品C', '产品D'].forEach(product => {
                products[product] = 0;
            });

            // 计算每个产品的销售额
            salesData.value.forEach(sale => {
                products[sale.product] += sale.quantity * sale.price;
            });

            // 计算百分比
            if (total > 0) {
                Object.keys(products).forEach(product => {
                    products[product] = {
                        value: products[product],
                        percentage: ((products[product] / total) * 100).toFixed(1)
                    };
                });
            } else {
                Object.keys(products).forEach(product => {
                    products[product] = {
                        value: 0,
                        percentage: '0.0'
                    };
                });
            }
            return products;
        });

        function updateEffect() {
            // 更新销售统计
            document.getElementById('total-sales').textContent = totalSales.value.toFixed(2);
            document.getElementById('total-quantity').textContent = totalQuantity.value;
            document.getElementById('avg-price').textContent = avgPrice.value;
            document.getElementById('sale-count').textContent = saleCount.value;

            // 更新区域分布
            const regions = regionDistribution.value;
            Object.keys(regions).forEach(region => {
                const bar = document.getElementById(`region-${region}`);
                const value = document.getElementById(`region-${region}-value`);
                bar.style.setProperty('--width', `${regions[region].percentage}%`);
                value.textContent = `${regions[region].percentage}%`;
            });

            // 更新产品表现
            const products = productPerformance.value;
            Object.keys(products).forEach(product => {
                const bar = document.getElementById(`product-${product}`);
                const value = document.getElementById(`product-${product}-value`);
                bar.style.setProperty('--width', `${products[product].percentage}%`);
                value.textContent = `${products[product].value.toFixed(2)}元`;
            });

            // 更新销售记录表格
            const tbody = document.getElementById('sales-data');
            tbody.innerHTML = '';
            salesData.value.forEach((sale, index) => {
                const row = document.createElement('tr');
                const checkboxCell = document.createElement('td');
                const checkbox = new Checkbox({
                    onChange: (checked) => {
                        row.classList.toggle('selected', checked);
                    }
                });
                checkbox.element.querySelector('.checkbox-input').classList.add('sale-checkbox');
                checkbox.element.querySelector('.checkbox-input').setAttribute('data-index', index);
                checkboxCell.appendChild(checkbox.element);

                row.appendChild(checkboxCell);

                const cells = [
                    sale.product,
                    sale.quantity,
                    sale.price,
                    (sale.quantity * sale.price).toFixed(2),
                    sale.region,
                    sale.note || '-'
                ];

                cells.forEach(cellData => {
                    const td = document.createElement('td');
                    td.textContent = cellData;
                    row.appendChild(td);
                });

                const actionCell = document.createElement('td');
                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.style.backgroundColor = '#e74c3c';
                deleteButton.onclick = () => deleteSale(index);
                actionCell.appendChild(deleteButton);
                row.appendChild(actionCell);
                tbody.appendChild(row);
            });

        }
        // // 更新UI的副作用
        // effect(updateEffect);

        // 批量更新函数
        function batchUpdate(newData) {
            // 使用深拷贝确保数据引用完全更新
            const currentData = JSON.parse(JSON.stringify(salesData.value));
            currentData.push(...newData);
            salesData.value = currentData;
            effect(updateEffect);
        }

        // 自定义确认框函数


        function deleteSale(index) {
            const modal = new Modal();
            modal.confirm('确定要删除这条销售记录吗？').then(confirmed => {
                if (confirmed) {
                    const currentData = JSON.parse(JSON.stringify(salesData.value));
                    currentData.splice(index, 1);
                    salesData.value = currentData;
                    effect(updateEffect);
                }
            });
        }

        // 批量删除功能
        function batchDeleteSales() {
            const selectedIndexes = Array.from(document.querySelectorAll('.sale-checkbox:checked'))
                .map(checkbox => parseInt(checkbox.getAttribute('data-index')))
                .sort((a, b) => b - a);

            if (selectedIndexes.length === 0) {
                const modal = new Modal();
                modal.alert('请先选择要删除的销售记录');
                return;
            }

            const modal = new Modal();
            modal.confirm(`确定要删除选中的 ${selectedIndexes.length} 条销售记录吗？`).then(confirmed => {
                if (confirmed) {
                    const currentData = JSON.parse(JSON.stringify(salesData.value));
                    selectedIndexes.forEach(index => {
                        currentData.splice(index, 1);
                    });
                    salesData.value = currentData;
                    effect(updateEffect);
                }
            });
        }

        // 全选/反选功能
        const selectAllCheckbox = new Checkbox({
            onChange: (checked) => {
                const checkboxes = document.querySelectorAll('.sale-checkbox');
                checkboxes.forEach(checkbox => checkbox.checked = checked);
                // 更新每行的选中状态
                document.querySelectorAll('#sales-table tbody tr').forEach(row => {
                    row.classList.toggle('selected', checked);
                });
            }
        });
        selectAllCheckbox.mount('#select-all-container');

        // 批量删除按钮事件
        document.getElementById('batch-delete').addEventListener('click', batchDeleteSales);

        // 添加销售记录
        document.getElementById('add-sale').addEventListener('click', () => {
            const product = productSelect.getValue();
            const quantity = quantityInput.getValue();
            const price = priceInput.getValue();
            const region = regionSelect.getValue();
            const note = document.getElementById('note').value;

            if (!product || !region) {
                const modal = new Modal();
                modal.alert('请填写完整的销售信息！');
                return;
            }

            batchUpdate([{ product, quantity, price, region, note }]);
            // 清空输入框
            quantityInput.setValue(1);
            priceInput.setValue(100);
            document.getElementById('note').value = '';
        });

        // 添加演示数据
        document.getElementById('add-demo-data').addEventListener('click', () => {
            const demoData = [
                { product: '产品A', quantity: 100, price: 199, region: '华东' },
                { product: '产品B', quantity: 50, price: 299, region: '华南' },
                { product: '产品C', quantity: 75, price: 399, region: '华北' },
                { product: '产品D', quantity: 25, price: 499, region: '西部' },
                { product: '产品A', quantity: 60, price: 189, region: '华南' },
                { product: '产品B', quantity: 40, price: 289, region: '华东' },
                { product: '产品C', quantity: 30, price: 389, region: '西部' },
                { product: '产品D', quantity: 20, price: 489, region: '华北' }
            ];
            batchUpdate(demoData);
        });
    </script>
</body>

</html>